<template>
  <div class="products">
    <HomeTop />
   <div class="swiper-wrap">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide>
            <img src="../assets/imgs/product/banner_1.png" alt="" />
          </swiper-slide>
          <swiper-slide>
           <img src="../assets/imgs/product/banner_1.png" alt="" />
          </swiper-slide>
          <swiper-slide>
           <img src="../assets/imgs/product/banner_1.png" alt="" />
          </swiper-slide>
          <swiper-slide>
           <img src="../assets/imgs/product/banner_1.png" alt="" />
          </swiper-slide>
        </swiper>
            <!-- <div class="swiper-button-next"></div> -->
      <!-- <div class="swiper-button-prev"></div> -->
      </div>
      <div class="producd">
       <img src="../assets/imgs/product/product.png" alt="">
      </div>
    <div class="products_neirong">
        <router-link to="/productsd/qht">
      <div class="products_neirong1">
        <!-- <div class="products_neirong1_beijing"></div> -->
        <div class="products_neirong1_left">
          <img
            class="function-Left"
            src="../assets/imgs/product/qht_pic.png"
            alt=""
          />
        </div>
        <div class="products_neirong1_right">
          <div class="products_neirong1_right_qiu">
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="products_neirong1_right1">
            <div class="products_neirong1_right1_pic animate-el"></div>
            <h2 class="animate-el">企汇通</h2>
          </div>
          <b class="products_neirong1_right1_b animate-el"
            >--智慧门店云管理系统</b
          >
          <div class="products_neirong1_right_footh">
            <div class="products_neirong1_right_footh_h2">
              <h2 class="animate-el">
                138项管理操作、15大功能模块,
                是一款着力解决企业管理会员、商户、员工、商品、收银的云利器
              </h2>
            </div>
            <div class="products_neirong1_right_footh_li">
              <ul>
                <li class="animate-el">
                  <span class="iconfont shouyin"></span>
                  收银管理
                </li>
                <li class="animate-el">
                  <span class="iconfont shangpin"></span>
                  商品管理
                </li>
                <li class="animate-el">
                  <span class="iconfont huiyuan1"></span>
                  会员管理
                </li>
              </ul>
              <div class="products_neirong1_right_footh_li1">
                <ul>
                  <li class="animate-el">
                    <span class="iconfont yuangongguanli"></span>
                    员工管理
                  </li>
                  <li class="animate-el">
                    <span class="iconfont liansuodian"></span>
                    连锁管理
                  </li>
                  <li class="animate-el">
                    <span class="iconfont baobiao"></span>
                    报表管理
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
       </router-link>
       <router-link to="/productsd/ip">
      <div class="products_neirong2">
        <div class="products_neirong2_left">
          <div class="products_neirong2_left_pic animate-el"></div>
          <h2 class="animate-el">IP系统</h2>
          <b class="products_neirong2_left_b animate-el"
            >--商家IP、员工IP打造</b
          >
          <div class="products_neirong2_left_h3 animate-el">
            <h3>
              为商家、员工及会员提供一个分享展示的平台，
              不仅可以发布个人作品，还可以尽情互动、关注、预约，增强会员粘性
            </h3>
          </div>
          <div class="products_neirong2_left_ion">
            <ul>
              <li class="animate-el">
                <span class="iconfont ip"></span>
                IP打造
              </li>
              <li class="animate-el">
                <span class="iconfont shejiao"></span>
                社交互动
              </li>
              <li class="animate-el">
                <span class="iconfont liuliangtongji"></span>
                私域流量
              </li>
            </ul>
          </div>
        </div>
        <div class="products_neirong2_right">
          <div class="products_neirong2_right_qiu">
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <img
            class="function-Right"
            src="../assets/imgs/product/ip_system_pic.png"
            alt=""
          />
        </div>
      </div>
      </router-link>
      <div class="products_neirong3_fu">
        <router-link to="/productsd/mbmh">
        <div class="products_neirong3">
          <div class="products_neirong3_left">
            <img
              class="function-Left"
              src="../assets/imgs/product/meibangmeihui_pic.png"
              alt=""
            />
          </div>
          <div class="products_neirong3_right">
            <div class="products_neirong3_right_qiu">
              <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div class="products_neirong3_right_top">
              <div class="products_neirong3_right_top_beijin animate-el"></div>
              <div class="products_neirong3_right_top_b">
                <b class="animate-el">美帮美汇</b>
                <h2 class="animate-el">--社交分享，全网裂变传播</h2>
              </div>
              <div class="products_neirong3_right_top_h3 animate-el">
                <h3>
                  商家可以邀请其他商家形成异业联盟，资源互换，达到利益最大化，协同传统企业无缝对接互联网+经济时代
                </h3>
              </div>
              <div class="products_neirong3_right_footh">
                <ul>
                  <li class="animate-el">
                    <span class="iconfont shangcheng1"></span>
                    精选商城
                  </li>
                  <li class="animate-el">
                    <span class="iconfont lianmeng"></span>
                    异业联盟
                  </li>
                  <li class="animate-el">
                    <span class="iconfont shejiao"></span>
                    社交传播
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        </router-link>
      </div>
    </div>
    <HomeBottom />
  </div>
</template>

<script>
import Observer from "../utils/observer.js";
import HomeTop from "@/components/Hometop.vue";
import HomeBottom from "@/components/Homebottom.vue";
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  name: "Products",
  components: {
    HomeTop,
    HomeBottom,
    Swiper,
    SwiperSlide,
  },
 data() {
    return {
      swiper: [
        {
          path: "http://pic.yupoo.com/isfy666/695a996e/393b433f.jpg",
        },
        {
          path: "http://pic.yupoo.com/isfy666/04190d49/6c109d2f.jpg",
        },
        {
          path: "http://pic.yupoo.com/isfy666/c35dc34c/22ac2192.jpg",
        },
        {
          path: "http://pic.yupoo.com/isfy666/e13a3060/c52faf58.png",
        },
      ],
      logLeft: 0,
      minLeft: -40,
      showAside: false,
      slidesPerView: 4,
      swiperOptions: {
        // slidesPerView:4,
        autoplay: true,
        centerInsufficientSlides: true,
        // 环路播放
        loop: true,
      },
      animaterEls: [], // 动画元素
      Observer: "",
      Observer2: "",
    };
  },
  // mounted(){
  //     const els2 = document.querySelectorAll('.animater-el')
  //     this.observer = Observer({
  //             els:els2,
  //             threshold:0.2
  //         },(el)=>{
  //             const classStr = el.dataset.animater.split(',');
  //             const delay = el.dataset.delay;
  //             if(delay) return setTimeout(()=>{
  //                 el.style.visibility = 'visible';
  //                 el.classList.add(classStr[0])
  //             },400)
  //             el.style.visibility = 'visible';
  //             el.classList.add(classStr[0])
  //         })
  // },
  mounted() {
    const els = document.querySelectorAll(".animate-el");
    this.Observer = Observer(
      {
        els: els,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInDown");
      }
    );
    const els2 = document.querySelectorAll(".function-Left");
    this.Observer2 = Observer(
      {
        els: els2,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInLeft");
      }
    );
    const els3 = document.querySelectorAll(".function-Right");
    this.Observer3 = Observer(
      {
        els: els3,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInRight");
      }
    );
  },
  beforeDestroy() {
    this.observer && window.removeEventListener("scroll", this.observer);
  },
};
</script>

<style scoped>
.products {
  overflow-x: hidden;
}
.swiper-wrap {
  height: 700px;
}
.swiper-container {
  height: 100%;
  width: 100%;
}
img {
  height: 100%;
}
.swiper-slide {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.producd{
  width: 910px;
  height: 261px;
  margin: auto;
  margin-top: 243px;
}
.products_neirong {
  position: relative;
}
.products_neirong1 {
  width: 1570px;
  height: 856px;
  box-shadow: 10px 10px 5px #e6e4e4;
  margin: auto;
  margin-top: 100px;
  /* background: #4b98ff url("../assets/imgs/product/active_bg.png") left bottom; */
  overflow: hidden;
  border-radius: 35px;
}
.products_neirong1:hover {
  background: #4b98ff url("../assets/imgs/product/active_bg.png") left bottom;
  box-shadow: 0 0 0;
}
.products_neirong1:hover .products_neirong1_right h2 {
  color: #fff;
}
.products_neirong1:hover .products_neirong1_right1_b {
  color: #fff;
}
.products_neirong1:hover .products_neirong1_right_footh_li li {
  color: #fff;
}
.products_neirong1:hover .products_neirong1_right_qiu ul li {
  background: #fff;
}

.products_neirong1_left img {
  position: absolute;
  top: 11%;
  left: 10%;
  max-width: 50%;
    height: auto;
}
.products_neirong1_right {
  width: 720px;
  height: 856px;
  position: absolute;
  left: 54%;
}
.products_neirong1_right_qiu {
  width: 130px;
  height: 22px;
  position: absolute;
  left: 558px;
  margin-top: 84px;
}
.products_neirong1_right_qiu ul li {
  width: 17px;
  height: 17px;
  border-radius: 50px;
  background: #b9b9b9;
  float: left;
  margin-right: 25px;
}
.products_neirong1_right h2 {
  font-size: 92px;
  color: #4b98ff;
  /* color: #4b98ff; */
  font-weight: 700;
  position: absolute;
  top: 32%;
  left: 23%;
}
.products_neirong1_right1_pic {
  color: #fff;
  background: url("../assets/imgs/product/qht.png") no-repeat;
  height: 14rem;
  text-align: center;
  position: relative;
  left: 24%;
  top: 134px;
  width: 415px;
}
.products_neirong1_right1_b {
  font-size: 41px;
  color: #4b98ff;
  position: absolute;
  top: 47%;
  left: 19%;
}
.products_neirong1_right_footh {
  width: 623px;
  height: 243px;
  position: absolute;
  top: 59%;
  left: 10%;
}
.products_neirong1_right_footh_h2 {
  width: 623px;
  height: 72px;
}
.products_neirong1_right_footh_h2 h2 {
  font-size: 22px;
  color: #000;
  position: absolute;
  top: 0%;
  left: 0%;
  font-weight: normal;
  line-height: 38px;
}
.products_neirong1_right_footh_li {
  width: 569px;
  height: 59px;
  position: absolute;
  top: 50%;
}
.products_neirong1_right_footh_li li {
  float: left;
  width: 33%;
  font-size: 1.3rem;
  color: #4592e6;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.products_neirong1_right_footh_li li .iconfont {
  display: inline-block;
  width: 2.133333rem;
  height: 2.133333rem;
  border-radius: 50%;
  background-color: #6ca4ff;
  margin-right: 0.5333333333333333rem;
  line-height: 2.133333rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}
.products_neirong1_right_footh_li1 {
  width: 569px;
  height: 59px;
  position: absolute;
  top: 80%;
}
.products_neirong1_right_footh_li1 li {
  float: left;
  width: 33%;
  font-size: 1.3rem;
  color: #4592e6;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.products_neirong1_right_footh_li1 li .iconfont {
  display: inline-block;
  width: 2.133333rem;
  height: 2.133333rem;
  border-radius: 50%;
  background-color: #6ca4ff;
  margin-right: 0.5333333333333333rem;
  line-height: 2.133333rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}
.products_neirong2 {
  width: 1570px;
  height: 856px;
  position: relative;
  margin: auto;
  top: 159px;
  margin: auto;
  box-shadow: 10px 10px 5px #e6e4e4;
  overflow: hidden;
  border-radius: 35px;
}
.products_neirong2:hover {
  box-shadow: 0 0 0;
  background: #4b98ff url("../assets/imgs/product/active_bg.png") left bottom;
}
.products_neirong2:hover .products_neirong2_left h2 {
  color: #fff;
}
.products_neirong2:hover .products_neirong2_left b {
  color: #fff;
}
.products_neirong2:hover .products_neirong2_left_h3 h3 {
  color: #fff;
}
.products_neirong2:hover .products_neirong2_left_ion li {
  color: #fff;
}
.products_neirong2:hover .products_neirong2_left_ion .iconfont {
  color: #fff;
}
.products_neirong2:hover .products_neirong2_right_qiu ul li{
  background-color: #fff;
}
.products_neirong2_left_pic {
  background: url("../assets/imgs/product/ip_system.png") no-repeat;
  height: 14rem;
  text-align: center;
  position: relative;
  left: 7%;
  top: 253px;
}
.products_neirong2_left h2 {
  font-size: 92px;
  color: #4b98ff;
  /* color: #4b98ff; */
  font-weight: 700;
  position: absolute;
  top: 32%;
  left: 7%;
}
.products_neirong2_left b {
  font-size: 38px;
  color: #4b98ff;
  position: absolute;
  top: 50%;
  left: 5%;
  font-weight: normal;
}
.products_neirong2_left_h3 {
  width: 635px;
  height: 71px;
  position: absolute;
  top: 60%;
  left: 6%;
}
.products_neirong2_left_h3 h3 {
  font-size: 20px;
  color: rgb(68, 63, 63);
  line-height: 33px;
}
.products_neirong2_left_ion {
  width: 571px;
  height: 42px;
  position: absolute;
  top: 77%;
  left: 6%;
}
.products_neirong2_left_ion li {
  float: left;
  width: 33%;
  font-size: 1.3rem;
  color: #4592e6;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.products_neirong2_left_ion .iconfont {
  display: inline-block;
  width: 2.133333rem;
  height: 2.133333rem;
  border-radius: 50%;
  background-color: #6ca4ff;
  margin-right: 0.5333333333333333rem;
  line-height: 2.133333rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}
.products_neirong2_right_qiu {
  width: 130px;
  height: 22px;
  position: absolute;
  left: 92%;
  top: 11%;
}
.products_neirong2_right_qiu ul li {
  width: 17px;
  height: 17px;
  border-radius: 50px;
  background: #b9b9b9;
  float: left;
  margin-right: 25px;
}
.products_neirong2_right img {
  max-width: 86%;
  height: auto;
  position: absolute;
  left: 14%;
  top: 20%;
}
.products_neirong3_fu {
  width: 1570px;
  height: 856px;
  margin: auto;
  margin-bottom: 542px;
}
.products_neirong3 {
  width: 1570px;
  height: 856px;
  position: relative;
  margin: auto;
  top: 318px;
  margin-bottom: 225px;
  overflow: hidden;
  border-radius: 35px;
  box-shadow: 10px 10px 5px #e6e4e4;
}
.products_neirong3:hover {
  background: #4b98ff url("../assets/imgs/product/active_bg.png") left bottom;
  box-shadow: 0 0 0;
}
.products_neirong3:hover .products_neirong3_right_top_b b {
  color: #fff;
}
.products_neirong3:hover .products_neirong3_right_top_b h2 {
  color: #fff;
}
.products_neirong3:hover .products_neirong3_right_top_h3 h3 {
  color: #fff;
}
.products_neirong3:hover .products_neirong3_right_footh li {
  color: #fff;
}
.products_neirong3:hover  .products_neirong3_right_qiu ul li{
  background-color: #fff;
}
.products_neirong3_left img {
  max-width: 43%;
  height: auto;
  position: absolute;
  left: 7%;
  top: 23%;
}
.products_neirong3_right {
  width: 740px;
  height: 856px;
  float: right;
  position: relative;
}
.products_neirong3_right_qiu {
  width: 130px;
  height: 22px;
  position: absolute;
  left: 558px;
  margin-top: 47px;
}
.products_neirong3_right_qiu ul li {
  width: 17px;
  height: 17px;
  border-radius: 50px;
  background: #b9b9b9;
  float: left;
  margin-right: 25px;
}
.products_neirong3_right_top_beijin {
  background: url("../assets/imgs/product/meibangmeihui.png") no-repeat;
  height: 14rem;
  text-align: center;
  position: relative;
  left: 7%;
  top: 99px;
}
.products_neirong3_right_top_b {
  position: absolute;
  top: 29%;
  left: 7%;
}
.products_neirong3_right_top_b b {
  font-size: 90px;
  /* color: #4592e6; */
  color: #4b98ff;
}
.products_neirong3_right_top_b h2 {
  font-size: 30px;
  color: #4592e6;
  position: absolute;
  top: 115%;
  left: 7%;
  width: 380px;
  height: 27px;
}
.products_neirong3_right_top_h3 {
  width: 635px;
  height: 73px;
  position: absolute;
  top: 55%;
  left: 7%;
}
.products_neirong3_right_top_h3 h3 {
  font-size: 20px;
  line-height: 33px;
  color: rgb(68, 63, 63);
}
.products_neirong3_right_footh {
  width: 560px;
  height: 35px;
  position: absolute;
  left: 8%;
  top: 70%;
}
.products_neirong3_right_footh li {
  float: left;
  width: 33%;
  font-size: 1.3rem;
  color: #4592e6;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.products_neirong3_right_footh .iconfont {
  display: inline-block;
  width: 2.133333rem;
  height: 2.133333rem;
  border-radius: 50%;
  background-color: #6ca4ff;
  margin-right: 0.5333333333333333rem;
  line-height: 2.133333rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}
</style>